<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">点击触发后置防抖</button>
    <button class="btn2">点击我触发前置防抖</button>
    <script>
      // 防抖（debounce）： 在一段时间内 让某个事件只执行一次 ，如果不停的触发 那么会重新计时 。

      //   1. 防抖 （后置防抖：点击之后过一段时间执行一次）
      var btnEle = document.querySelector(".btn");
      var fn = function () {
        console.log(1111);
      };
      var timer = null;
      btnEle.onclick = function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
          fn();
        }, 1000);
      };
      // 当第一次点击的时候  ： 清空 timer=  null  clearTimeout(null);  --->生成一个新定时器 timer = 1;---->过1s之后执行fn函数
      // 第二次 点击的时候： 清空timer = 1 （上次的定时器）  --->生成一个新的定时器 timer = 2; --->1s之后执行fn函数；

      // 2.防抖 前置 （先执行函数在防抖）;
      var btnEle2 = document.querySelector(".btn2");

      var fn2 = function () {
        console.log(2222);
      };

      var timer = null;
      btnEle2.onclick = function () {
        // if(!timer){
        //     fn2()
        // }

        !timer && fn2();
        clearTimeout(timer);
        timer = setTimeout(function () {
          timer = null;
        }, 1000);
      };

      // 第一次点击： timer = null (false)--->  !timer (true) --->立刻执行fn2----》clearTimeout(null)(无意义)
      // ---》 生成一个timer = 1； ----》timer=null?? 看时间？？
      // 第二次点击  1.在1s之内  没有执行上一次的  timer=null 就被 第二次的  clearTimeout(timer);清除了
      // timer = 1  不会执行 fn2函数 ----》清除上一次的clearTimeout(timer); -- 又生成一个新的  timer = 2；
      //  2. 在1s之外点击的 。 timer = null 就已经被成功赋值
      // timer = null  --->会执行 fn2（）； ---->clearTimeout无意义 --->生成一个新的timer = 2
    </script>
  </body>
</html>
